<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>评分</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="css/star.css">
</head>

<body>
    <div id="app">
        我要打分：<input v-model.number="starNum" />
        <rating v-model="starNum"></rating>
    </div>
    <script src='vue.js'></script>
    <script type="text/html" id="rating">
        <div class="star-box">
            满意度：
            <span class='glyphicon glyphicon-star' v-for='n in 5' :style='n<=value?stylelist():shadow(n,value)' :data-id='n' @mousedown='mousedown'></span>
            <!-- @mousemove='mousedown'-->
        </div>
    </script>
    <script>
        Vue.component('rating', {
            template: '#rating',
            props: ['value'],
            methods: {
                stylelist: function () {
                    return {
                        color: 'orange'
                    }    
                },
                shadow: function (m, e) {
                    var num = Math.floor(e)
                    if (num == (m - 1)) {
                        if ((e % num) < 1 || num == 0) {
                            var percent = (e - num) * 100 + '%'
                            return {
                                'background-image': 'linear-gradient(to right,orange,orange ' + percent + ',#ccc,#ccc ' + percent + ')',
                                '-webkit-background-clip': 'text',
                                '-webkit-text-fill-color': 'transparent',
                            }
                        }
                    }
                },
                mousedown(e) {
                    var id = e.target.dataset['id']
                    this.$emit('input', id)
                },
                mousemove(e) {
                    var id = e.target.dataset['id']
                    this.$emit('input', id)
                },
            }
        })
        new Vue({
            el: '#app',
            data: {
                starNum: 3
            },
        })
    </script>
</body>

</html>